<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body id="body">
		<div>单击获取坐标</div>
		<!--
        	作者：zyl
        	时间：2017-05-26
        	描述：Canvas 对象
        context.arcTO()	
		定义和用法
		arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
		提示：请使用 stroke() 方法在画布上绘制确切的弧。
			JavaScript 语法：	context.arcTo(x1,y1,x2,y2,r);
			参数值  			参数	描述
			
				x1	  	弧的起点的 x 坐标。
				y1		弧的起点的 y 坐标。
				x2		弧的终点的 x 坐标。
				y2		弧的终点的 y 坐标。
				r		弧的半径。
			
				context.moveTo(x0,y0);//初始点
				context.arcTo(x1,y1,x2,y2,r);//
        -->
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<script>
	window.onload =function(){};//现在浏览器不需要
			var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	////////////////////////////////////////////////////		
			//arcTo()
		/*	context.beginPath();
			context.moveTo(150,150);
			context.arcTo(650,150,650,650,300);
			
			context.lineWidth=5;
			context.strokeStyle="red";
			context.stroke();
			
			//baseline辅助线
			context.beginPath();
			context.moveTo(150,150);
			context.lineTo(650,150);
			context.lineTo(650,650);
			context.lineWidth=2;
			context.strokeStyle="blue";
			context.stroke();*/
	////////////////////////////////////////////
	arcToTest(context,200,150,700,150,700,650,100);
	arcToTest(context,200,150,700,150,700,650,500);
	arcToTest(context,200,150,700,150,700,650,800);
	//分装一个
	function arcToTest(cxt,x0,y0,x1,y1,x2,y2,r){//环境，开始点，辅助线1 和辅助线2  半径
		cxt.beginPath();
		cxt.moveTo(x0,y0);
		cxt.arcTo(x1,y1,x2,y2,r);
		
		cxt.lineWidth=6;
		cxt.strokeStyle="yellow";
		cxt.stroke();
		
		cxt.beginPath();
		cxt.moveTo(x0,y0);
		cxt.lineTo(x1,y1);
		cxt.lineTo(x2,y2);
		context.lineWidth=1;
		context.strokeStyle="grey";
		context.stroke();
	}
	
	//单击获取坐标
window.onload=function(){
	var obj=document.documentElement;
	var oDiv=document.getElementById("body");
	
	obj.onclick=function(e){
		oEvent=e||event;
		obj.mouseStart={};
		obj.mouseStart.x=oEvent.clientX;
		obj.mouseStart.y=oEvent.clientY;
		oDiv.innerHTML="x坐标="+obj.mouseStart.x+"y坐标为"+obj.mouseStart.y;
	};
};

	
	</script>
</html>
